<template>
  <a-card :bordered="false">
    <a-form :form="form">
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="内容">
        <a-textarea placeholder="请输入需要生成的内容" v-model="code" :rows="3"/>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="logo地址">
        <a-input placeholder="请输入logo地址"  v-model="logo" />
      </a-form-item>
      <a-row>
        <a-col :span="6" offset="4">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="width">
            <a-input-number placeholder="请输入width"  v-model="width" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="height">
            <a-input-number placeholder="请输入height"  v-model="height" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item :wrapperCol="{span: 24, offset: 18}">
        <a-button style="margin-left: 18px" type="primary" @click="handleGenerate">生成</a-button>
      </a-form-item>
    </a-form>
    <a-row>
      <a-col :span="24">
        <img :src="qrCodeImage" preview/>
      </a-col>
    </a-row>

  </a-card>
</template>

<script>

  import {getAction} from '@/api/manage'
  import ATextarea from 'ant-design-vue/es/input/TextArea'

  export default {
    name: "GenerateQrCode",
    components: {
      ATextarea
    },
    data () {
      return {
        description: '微信小程序',
        model: {},
        code:'',
        logo:'https://pic.flyco.net.cn/mall/logo.jpg',
        width:250,
        height:250,
        qrCodeImage:'',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
		    url: {
          generate: "/data/generateQrCode",
        },

       }
    },
    created () {
    },
    computed: {

    },
    methods: {
      handleGenerate() {
        if(!this.code){
          this.$message.error("二维码生成内容不可为空")
          return
        }
        getAction(this.url.generate, {code:this.code,logo:this.logo,width:this.width,height:this.height}).then((res) => {
          if (res.success) {
            this.qrCodeImage = res.result
          } else {
            this.$message.error(res.message)
          }
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>